<template>
  <div>
  	<div class="sh-top">
			<span class="sh-top-one">您的当前位置:</span>
			<a href="#/">首页</a>
			<span>></span>
			<span>全部商品</span>
		</div>
    <div class="sh-wrap">
      <div class="sh-wrap-top">
        <div class="sh-top-left">
          <div class="sh-left-top">
            <fd :url="spm['imgurl']" big-url="http://localhost:8088/img/jdb.png" :scale="2"></fd>
          </div>
          <div class="sh-left-down">
            <div>
              <img src="../assets/left.png" alt=""/>

            </div>
            <div>
              <ul class="sh-ul">
                <li>
                  <img :src="spm['imgurl']"/>

                </li>
              </ul>
            </div>
            <div>
              <img src="../assets/right.png" alt=""/>
            </div>
          </div>
        </div>
        <div class="sh-top-right">
          <h3>{{spm.name}}</h3>
          <div class="sh-describe">
            <h4>
              <span>自营</span>
              <span>次日达</span>
            </h4>
            <div class="sh-img">
              <img src="../assets/download.png"/>
              <h4>资深买家</h4>
            </div>
          </div>
          <div class="sh-price">
            <span>现价:{{spm['pric']}}</span>
            <span>原价:{{spm['free']}}</span>
          </div>
          <div class="sh-num">
            <span>数量:</span>
            <div>
              <span>-</span>
              <input type="text" value="1" class="cla-num"/>
              <span>+</span>
            </div>
            <span>件</span>
            <a href="" class="sh-a sh-add-cat">加入购物车</a>
            <a href="" class="sh-a sh-buy">立即购买</a>
          </div>
          <div class="sh-share">
            <span>收藏次商品</span>
            <span class="sh-fx">分享到:</span>
            <div class="jiathis_style">
              <a href="http://www.jiathis.com/share" class="jiathis jiathis_txt jtico jtico_jiathis"
                 target="_blank"></a>
              <a class="jiathis_button_qzone"></a>
              <a class="jiathis_button_tsina"></a>
              <a class="jiathis_button_tqq"></a>
              <a class="jiathis_button_weixin"></a>
              <a class="jiathis_button_renren"></a>
            </div>
          </div>
        </div>
      </div>
      <div class="sh-bottom">
        <div class="sh-title">
          <a href="javascript:void(0)" class="sh-spxq">商品详情</a>
          <a href="javascript:void(0)">商品评价</a>
        </div>
        <div class="sh-content">
        </div>
        <div class="sh-pingjia">
          <p>暂无评论信息</p>
          <div class="sh-pages">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Fd from 'vue-piczoom'
  import store from '@/vuex/store'
  import {mapGetters} from 'vuex'

  export default {
    name: "commodity-details",
    components: {
      Fd
    },
    store,
    computed: mapGetters(['spm'])
  }
</script>

<style scoped>
	.sh-top {
		width: 1260px;
		height: 55px;
		line-height: 55px;
		background-color: #f4f4f4;
		font-size: 15px;
		color: rgb(50, 50, 50);
		margin: 20px auto;
	}
	
	.sh-top-one {
		padding-left: 20px;
	}
	
	.sh-top a {
		margin-left: 15px;
	}
	
	.sh-top span {
		margin-left: 5px;
	}
  .selectd {
    border: 2px solid orange;
  }

  .sh-wrap {
    width: 1280px;
    margin-top: 20px;
    margin: auto;
  }

  .sh-wrap-top {
    width: 100%;
    height: 636px;
    overflow: hidden;
  }

  .sh-top-left {
    width: 500px;
    height: 500px;
    float: left;
  }

  .sh-top-right {
    width: 760px;
    float: right;
  }

  .sh-img img {
    width: 100px;
    height: 100px;
  }

  .sh-top-right h3 {
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 10px;
  }

  .sh-describe {
    margin-top: 30px;
    padding: 10px 0;
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    overflow: hidden;
  }

  .sh-describe h4,
  .sh-top-right h3 {
    font-family: inherit;
    font-weight: 500;
    line-height: 1.1;
    color: inherit;
  }

  .sh-describe h4 {
    font-size: 18px;
    margin-top: 10px;
    margin-bottom: 10px;
  }

  .sh-describe h4 span {
    padding: 2px 10px;
    background-color: #498E3D;
    font-size: 14px;
    margin-right: 20px;
    color: #fff;
  }

  .sh-img h4 {
    width: 120px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    background-color: #FFE313;
    border-radius: 20px;
  }

  .sh-price {
    margin-top: 25px;
    margin-bottom: 25px;
    font-weight: 500;
  }

  .sh-price span:nth-child(1) {
    font-size: 26px;
    color: #FF5757;
  }

  .sh-price span:nth-child(2) {
    text-decoration: line-through;
    margin-left: 20px;
    font-size: 20px;
    color: #666;
  }

  .sh-num {
    margin-bottom: 25px;
    font-weight: 500;
  }

  .sh-num span {
    font-size: 18px;
    color: #666666;
  }

  .sh-num div {
    display: inline-block;
    vertical-align: -8px;
    margin: 0 10px;
  }

  .sh-num div span {
    width: 30px;
    height: 30px;
    display: inline-block;
    float: left;
    text-align: center;
    line-height: 30px;
    border: solid 1px #ddd;
    background-color: #F2F2F2;
    font-size: 20px;
    cursor: pointer;
  }

  .sh-num div input {
    height: 30px;
    width: 70px;
    text-align: center;
    float: left;
    border: solid 1px #ddd;
    padding: 0 5px;
  }

  .sh-a {
    display: inline-block;
    width: 150px;
    margin: 0 10px;
    line-height: 40px;
    background-color: #F08200;
    border-radius: 5px;
    color: #fff;
    font-size: 20px;
    text-align: center;
  }

  .sh-share {
    overflow: hidden;
  }

  .sh-share span {
    float: left;
    font-size: 20px;
  }

  .sh-fx {
    margin-left: 20px;
    margin-right: 10px;
  }

  .jiathis_style {
    display: inline-block;
    float: left;
    margin-top: 5px;
  }

  .sh-left-down div:nth-child(2) {
    display: inline-block;
    float: left;
    width: 440px;
  }

  .sh-left-down ul li {
    width: 95px;
    margin-right: 20px;
    float: left;
    border: solid 2px #fff;
    list-style: none;
  }

  .sh-left-down ul li > img {
    width: 91px;
    height: 82px;
  }

  .sh-left-top {
    width: 500px;
    height: 500px;
  }

  .sh-left-top > img {
    width: 500px;
    height: 500px;
  }

  .sh-left-down div:nth-child(2n+1) {
    display: inline-block;
    float: left;
    padding: 0 8px;
    line-height: 90px;
    cursor: pointer;
  }

  .sh-spxq {
    background-color: #fff;
    border-top: solid 2px #498E3D;
    margin-top: -1px;
  }

  .sh-title {
    height: 50px;
    background-color: #F4F4F4;
    border: solid 1px #ddd;
  }

  .sh-title a {
    line-height: 50px;
    height: 50px;
    padding: 0 25px;
    float: left;
    font-size: 18px;
    border-right: solid 1px #ddd;
    text-decoration: none;
  }

  .sh-center {
    width: 1280px;
    margin: 0 auto;
  }

  .sh-pingjia {
    padding: 20px 40px 40px 40px;
    border: solid 1px #ddd;
    border-top: none;
    margin-bottom: 20px;
  }

  .sh-pingjia p {
    display: block;
    margin: auto;
    text-align: center;
    padding-bottom: 50px;
  }

  .sh-content {
    border: solid 1px #ddd;
    border-top: none;
    padding: 40px;
    margin: 0 auto;
  }

  .sh-pages {
    width: 100%;
    margin: auto;
    padding: 5px 0;
    text-align: center;
  }
</style>
